<!DOCTYPE html>
<html lang="zh-cmn-Hans">

<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
    <meta content="yes" name="apple-mobile-web-app-capable" />
    <meta content="black" name="apple-mobile-web-app-status-bar-style" />
    <meta name="format-detection" content="telephone=no" />
    <link rel="icon" type="image/png" href="../../static/favicon.ico" />

    <!-- 样式 -->
    <link rel="stylesheet" href="../../static/mobile/default/css/layout.css?v=2" />
    <link rel="stylesheet" href="../../static/assets/css/zpui.css" />
    <link rel="stylesheet" href="../../static/assets/css/all.css" />
    <link rel="stylesheet" href="../../static/mobile/default/css/my.css" />

    <style>
        .header .header-right a img {
            width: .3733rem;
            height: .3733rem;
        }

        .res-search-wrapper {
            height: .6875rem;
            line-height: .6875rem;
            background-color: #fff;
            margin-bottom: .08rem;
            text-align: center;
            
        }

        .res-search-wrapper .res-search {
            position: relative;
            width: 80%;
            margin: 0 auto;
            
        }

        .res-search-wrapper .res-search input{
            display: inline-block;
            border: .0133rem solid #ccc;
            border-radius: .3125rem;
            background-color: #dfdfdd;
            width: 100%;
            padding-left: .125rem;
            height: .5rem;
        }

        .res-search-wrapper .res-search a{
            position: absolute;
            top: .1563rem;
            right: .0938rem;
            width: .4267rem;
            height: .4267rem;
        }

        .res-search-wrapper .res-search a img {
            width: 100%;
            height: 100%;
        }

        .search-bd ul li{
            height: .9333rem;
            line-height: .9333rem;
            border-bottom: .0133rem solid #ccc;
            margin: .1333rem .3333rem;
        }

        .search-bd ul li a {
            height: .9333rem;
            line-height: .9333rem;
        }

        .search-bd .my-icon {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .search-bd li .icon {
            display: flex;
            height: .5rem;
            line-height: .5rem;
            width: 80%;
        }
        
        .search-bd li .icon img {
            width: .5rem;
            height: .5rem;
            border-radius: 50%;
            border: .0133rem solid #ccc;
        }
        
        .search-bd .icon .my-name {
            display: flex;
            flex-direction: column;
            justify-content: center;
            margin-left: .24rem;
            margin-right: .24rem;
            color: #000;
        }

        .search-bd .icon .my-name span{
            line-height: .2rem;
        }

        .search-bd .my-icon .level{
            height: .5rem;
            line-height: .5rem;
            width: 20%;
        }


    </style>

    <title>分会会员 - 孝邻会</title>
</head>

<body>
    <!-- 整体页面部分 -->
    <div class="page">
        <!-- 页面头部 -->
        <div class="page-hd">
            <div class="header bor-1px-b">
                <div class="header-left">
                    <a href="javascript:history.go(-1)" class="left-arrow"></a>
                </div>
                <div class="header-title">分会会员 - 孝邻会</div>
                <div class="header-right">
                    <a href="#">
                        <img src="../../static/assets/images/res/13.png" alt="">
                    </a>
                </div>
            </div>
        </div>

        <!-- 页面内容-->
        <div class="page-bd">
            <div class="res-search-wrapper">
                <div class="res-search">
                    <input type="text" name="keywords" placeholder="请输入ID或姓名或关键词查找" />
                    <a href="#" id="searchSon" ><img src="../../static/assets/images/res/14.png" alt=""></a>
                </div>
            </div>
            <div class="search-bd">
                <ul class="allBox">
<!--                    <li>-->
<!--                        <a href="userdeail.html" class="my-icon">-->
<!--                            <div class="icon">-->
<!--                                <img src="../../static/mobile/default/images/defheadimg.jpg" alt="" />-->
<!--                                <div class="my-name">-->
<!--                                    <span>姓名：<strong>孙建业</strong>&nbsp;<em>(5000298)</em></span>-->
<!--                                    <span>关键词：<em>电商</em></span>-->
<!--                                </div>-->
<!--                            </div>-->
<!--                            <span class="level">合伙人</span>-->
<!--                        </a>-->
<!--                    </li>-->

                </ul>
            </div>
            

        </div>

        <script id="TagTpl" type="text/html">
            {{each data as result index}}
            <li>
                <a href="userdeail.html?userId={{result.userId}}" class="my-icon">
                    <div class="icon">
                        <img src="{{result.avatar}}" alt="" />
                        <div class="my-name">
                            <span>姓名：<strong>{{result.realName}}</strong>&nbsp;<em>({{result.userId}})</em></span>
                            <span>行业关键词：<em>{{result.keywords}}</em></span>
                        </div>
                    </div>
                    <span class="level">{{result.levelName}}</span>
                </a>
            </li>
            {{/each}}
        </script>
        <!-- 没有热门需求-->
        <script type="text/html" id="emptyTpl">
            <div class="empeyOrder">
                <img src="./static/mobile/default/images/emptyData.png" alt="">
                <span class="fs28 color_3">暂无分会会员</span>
            </div>
        </script>

        <!-- 版权 -->
        <div class="copyright">
            Copyright © 达漂亮<br>
        </div>

    </div>

    <!-- alert弹窗部分 -->
    <div class="alertBox">
        <div class="alertBG"></div>
        <div class="alert">
            <div class="text fs30 color_3 bor_b">

            </div>
            <!-- 单按钮 -->
            <div class="button fs32 fw_b color_r">
                知道了
            </div>
            <!-- 双按钮 -->
            <div class="buttonBox fs32 fw_b">
                <span class="color_9 bor_r cancel">取消</span>
                <span class="color_r confirm">确定</span>
            </div>
        </div>
    </div>

    <!-- js -->
    <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
    <script src="../../static/js/jquery/jquery/2.1.4/jquery.min.js"></script>
    <script src="../../static/mobile/default/js/page.js?v=1"></script>
    <script src="../../static/js/art-template.js"></script>
    <script src="../../static/mobile/default/js/lib/fastclick.js"></script>
    <script src="../../static/assets/js/lib/jquery-2.1.4.js"></script>
    <script src="../../static/assets/js/jquery-weui.min.js"></script>
    <script src="../../static/assets/js/lib/fastclick.js"></script>

    <script src="../../static/js/jquery/jquery.cookie.js"></script>
    <script src="../../static/js/jquery/lazyload/jquery.lazyload.js"></script>

    <!-- 页面js部分 -->
    <script>
        var nowPage = [],getAgain = [],isLoadend = [];// 这里用数组的原因是可能有tab
        var _type = 'all';
        function getList(isagain, _keywords) {
            page = nowPage[_type];// 找不到all的属性，page的结果是undefined
            if (typeof(page) == 'undefined') page = 1;// 初始化为第一页
            if (isLoadend[_type] == true ) return false;// 如果到底了，就不在请求了
            // 重新请求
            if (isagain == true){
                if (getAgain[_type] == false) return false;// 内部标记为false，就不用再重新请求了
                getAgain[_type] = false;// 不用再重新请求了
            }else{
                // 显示加载中
                $('.'+_type+'Box').append('<div class="get_list_tip" data-type="'+_type+'">加载数据中...</div>');
            }
            // 默认就到底了
            isLoadend[_type] = true;
            $.ajax({
                url:'https://mp.jianguoes.com/api/mp/getAllSon',// 跳转到 action
                data:{page:page,size:100, keywords: _keywords},
                type:'get',
                headers:{'token': $.cookie('code')},
                dataType:'json',
                success:function(res) {
                    // 成功后，表示还没有到底
                    isLoadend[_type] = false;
                    if(res.errno  != 0 ){
                        _alert(res.errmsg);
                        // 获取数据失败，需要重新获取
                        getAgain[_type] = true;
                        $('.'+_type+'Box').find('.get_list_tip').html('加载失败，点击重新加载.');
                        return false;
                    }

                    $('.'+_type+'Box').find('.get_list_tip').remove();
                    if (res.data.data && res.data.data.length>0){
                        $('.'+_type+'Box').find('.empeyOrder').remove();

                        $('.'+_type+'Box').append(template('TagTpl',res.data));
                    }else{
                        $('.'+_type+'Box').html(template('emptyTpl'));
                    }

                    if (res.data.totalPages == page) {
                        $('.'+_type+'Box').append('<div class="get_list_tip">---我也有底线的---</div>');
                        // 真的到底了
                        isLoadend[_type] = true;
                    }else{
                        // 请求下一页
                        nowPage[_type] = page+1;
                    }
                },error : function() {
                    // 还没有到底
                    isLoadend[_type] = false;
                    // 要重新请求
                    getAgain[_type] = true;
                    $('.'+_type+'Box').find('.get_list_tip').html('加载失败，点击重新加载.');
                }
            });
        }
    </script>

    <!-- 启动加载 -->
    <script>
        $(function() {
            // 解决移动端浏览器 300 毫秒点击延迟问题
            FastClick.attach(document.body);

            getList();

            // 重新请求数据
            $(document).on('click','.get_list_tip',function () {
                getList(true);
            });

            $("#searchSon").on('click', function(){
                var _keywords = $("input[name='keywords']").val();
                nowPage[_type] = 1;
                isLoadend[_type] = false;
                getList(false, _keywords);
            });

            // 页面下拉事件
            $('.page-bd').scroll(function(){
                var box_h=$(this).height()
                var content_h=$('.scrollBox').height()
                var scroll_h=$(this).scrollTop();
                if(content_h-box_h-scroll_h<20){
                    getList();
                }
            });
        });
    </script>
</body>

</html>